<template>
  <div>
    <div :class="className">
      <el-row type="flex" v-for="(item ,index) in info" :key="index">
        <el-col :span="6" class="title bg-gray">{{item.label}}</el-col>
        <el-col :span="18" class="content bg-white">
          <div v-if="item.type && item.type !== ''" class="flex-area">
            <slot :name="item.type" :info="item"></slot>
          </div>
          <div v-else class="flex-area">
            {{item.value}}
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    name: "jxf-datalist",
    props: {
      lineNum: {
        type: Number,
        default: 1
      },
      info: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data(){
      return{
      }
    },
    watch:{
    },
    computed: {
      className: function () {
        return this.lineNum === 1 ? "flex" : "flex twoInLine"
      }
    }
  }
</script>

<style lang="scss" scoped>
  .flex {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    & > .el-row {
      width: 100%;
      .el-col {
        padding: 10px;
        border: 1px solid #ebebeb;
        border-bottom-width: 0;
        &.title {
          text-align: right;
          border-right-width: 0;
        }
      }
      &:last-child {
        .el-col {
          border-bottom-width: 1px;
        }
      }
    }
    &.twoInLine {
      & > .el-row {
        width: 50%;
        &:nth-child(2n + 1) {
          .el-col {
            border-right-width: 0;
          }
        }
        &:nth-last-child(1), &:nth-last-child(2) {
          .el-col {
            border-bottom-width: 1px;
          }
        }
      }
    }

  }
</style>
